<template>
  <div ref="sidebar" class="sidebar" :style="{
    '--move-len': moveLen + 'px',
    '--sidebarWidth': sidebarWidth + 'px'
  }">
    <div class="componentBox" v-if="componentName">
      <component :class="{ hidden: sidebarWidth === 0 }" :is="'utilsCon-' + componentName"></component>
    </div>
    <div v-else :class="{ hidden: sidebarWidth === 0 }">功能开发中----</div>
    <div :class="{ scroll: true, active: isActive }" @mousedown="mousedownFn" @mouseup="mouseupFn" v-wSize="moveFN">

    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
defineProps({
  componentName: String
})
const moveLen = ref<number>(0)
const sidebarWidth = ref<number>(250)
const currentSidebarWidth = ref<number>(250)
const sidebar = ref<HTMLElement>()
const isActive = ref<Boolean>(false)
const moveFN = (len: number) => {
  moveLen.value = len
  const width = currentSidebarWidth.value + len
  if (width > 150) {
    sidebarWidth.value = currentSidebarWidth.value + len
    isActive.value = true
  } else if (len < 0) {
    sidebarWidth.value = 0
    isActive.value = false
  }
}
const mousedownFn = () => {
  isActive.value = true
  const element = sidebar.value?.getBoundingClientRect()
  currentSidebarWidth.value = element?.width || 0
}
const mouseupFn = () => {
  isActive.value = false
}
</script>
<style scoped lang="less">
.sidebar {
  position: relative;
  height: 100%;
  width: var(--sidebarWidth);
  max-width: 800px;
  background-color: var(--bgc);

  .componentBox {
    height: 100%;
  }

  .scroll {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: var(--header);
    user-select: none;

    &:hover {
      cursor: w-resize;
      width: 4px;
      background-color: #1C82AD;
    }
  }

  .active {
    cursor: w-resize;
    width: 4px;
    background-color: #1C82AD;
  }

  .hidden {
    display: none;
  }
}
</style>